<template>
	<view class="refreshpurchase">
		<!-- 顶部导航 -->
		<diyNavBar value='置顶包' :color="'#FF6F30'" textright='使用记录' @goto='gotos'></diyNavBar>
		<view class="topbox">
			<text>我的剩余置顶时间</text>
			<text class="time">{{userinfo.topcount || 0}}小时</text>
		</view>
		<view class="title">购买须知*</view>
		<view class="txt">
			1、置顶包购买后不支持退订，请确认后购买。
		</view>
		<view class="txt">
			2、置顶的作用：适用于悬赏主，提高悬赏任务曝光。（若您不是悬赏主，请谨慎购买）
		</view>
		<view class="itembox">
			<view class="item" :class="indexJudge == index?'hoveritem':''" v-for="(item,index) in list" :index="index"
				@click="indexJudge = index">
				<view><text class="text">{{item.num}}</text><text class="tim">小时</text></view>
				<view><text class="title">￥{{item.price}}元</text></view>
			</view>
		</view>
		<button type="default" class="btn" @click="paymentSelect">购买</button>
		<uni-popup ref="popup" type="center">
			<view class="payment-box">
				<view class="item" v-for="(item,index) in paymenttype" :key="index" @click="paymentindex = index">
					<view class="item-left">
						<text class="iconfont" :class="item.icon"></text>
						{{item.name}}
					</view>
					<view class="right" v-if="paymentindex == index">
						<view class="center"></view>
					</view>
				</view>
				<button class="close" @click="btn">确定</button>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>

	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default {
		components: {
			diyNavBar,
			loadingCover
		},
		data() {
			return {
				indexJudge: 0,
				list: [],
				paymenttype: [], //支付方式
				paymentindex: 0, //支付方式选中
				judge: false,
				explain: {},
				code: '',
				userinfo: {}
			}
		},
		onShow() {
			this.getData();
			this.getpaymenttype()
			// 支付方式
			// #ifdef H5
			let url = window.location.href;
			const code = this.getParam('code');
			if (code) {
				this.code = code
				this.indexJudge = this.getParam('state');
				uni.showLoading({
					title:"支付中..."
				})
				setTimeout(() => {
					this.btn();
				}, 500)
			}
			// #endif

		},
		methods: {
			getData() {
				this.$http.sendrequest('/member/memberInfo', {}, {
					tokenJudge: true
				}).then(res => {
					this.userinfo = res.data.member;
				})
			},
			getParam(name) {
				// #ifdef H5
				var search = document.location.search;
				var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
				var matcher = pattern.exec(search);
				var items = null;
				if (null != matcher) {
					try {
						items = decodeURIComponent(decodeURIComponent(matcher[1]));
					} catch (e) {
						try {
							items = decodeURIComponent(matcher[1]);
						} catch (e) {
							items = matcher[1];
						}
					}
				}
				return items;
				// #endif

			},
			//弹窗打开
			paymentSelect() {
				this.$refs.popup.open();
			},
			//购买
			btn() {
				if (this.judge) return false;
				this.judge = true;
				// #ifdef H5
				if (this.paymenttype[this.paymentindex].id == 1) {
					if (!this.code) {
						let appid = 'wx22e93a7eadd13427';
						let redirect_uri = encodeURIComponent('http://hanbang.diruankeji.com/h5/pages/topping/topping');
						let url =
							`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${encodeURIComponent(this.indexJudge)}#wechat_redirect`;
						location.href = url;
						return;
					}
					// if (this.code) data.code = this.code
				}
				// #endif
				let data = {
					pay_type: this.paymenttype[this.paymentindex].id,
					id: this.list[this.indexJudge].id,
					price: this.list[this.indexJudge].price
				}
				
				if (this.code) {
					data.code = this.code
				}

				let payType = 'wxpay'; //微信
				if (this.paymenttype[this.paymentindex].id == 1) {
					// #ifdef APP
					data.pay_type = 3
					// #endif
				}
				if (this.paymenttype[this.paymentindex].id == 2) {
					payType = 'alipay'; //支付宝
					// #ifdef APP
					data.pay_type = 4
					// #endif
				}
				this.$http.sendrequest('/Recharge/Cztooping', data, {
					tokenJudge: true
				}).then(res => {
					let payData = res.data.pay
					this.judge = false
					if (res.code == 1) {
						// #ifdef APP
						uni.requestPayment({
							provider: payType,
							orderInfo: payData,
							success: res => {
								console.log("返回的支付数据", res)
							},
							fail: err => {
								console.log("err", err)
							}
						})
						// #endif
						// #ifdef H5
						let that = this;
						if (WeixinJSBridge) {
							uni.hideLoading()
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
								appId: res.data.pay.appId,
								timeStamp: res.data.pay.timeStamp,
								nonceStr: res.data.pay.nonceStr, // 支付签名随机串，不长于 32 位
								package: res.data.pay.package,
								signType: res.data.pay.signType,
								paySign: res.data.pay.paySign, // 支付签名
							}, function(r) {
								that.r = JSON.stringify(r)
								// 支付成功后的回调函数
								if (r.err_msg.includes('ok')) {
									uni.showToast({
										title: '支付成功',
										icon: 'success',
										success: () => {
											that.$util.redirectTo(
												'/pages/personal/personal', {}, 'switchTab'
												);
										}
									})
								} else if (r.err_msg.includes('cancel')) {
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										success: () => {
											that.$util.redirectTo(
												'/pages/personal/personal', {}, 'switchTab'
												);
										}
									})
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							const div = document.createElement('div')
							div.innerHTML = res.data.pay;
							document.body.appendChild(div)
							if (document.getElementById('alipay_submit')) {
								document.getElementById('alipay_submit').submit()
							} else if (document.getElementById('pay_form')) {
								document.getElementById('pay_form').submit()
							}
						}

						// #endif
						this.$refs.popup.close();
					}
				})
			},
			getpaymenttype() {
				this.$http.sendrequest('/payment/PaymentList').then(res => {
					if (res.code == 1) {
						this.paymenttype = res.data;
						this.paymenttype.forEach(item => {
							switch (item.name) {
								case '微信':
									item.icon = 'icon-weixin'
									break;
								case '支付宝':
									item.icon = 'icon-zhifubao'
									break;
							}
						})
					}
				})
				this.$http.sendrequest('/ToppingRecord/ToppingList', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data;
						this.$refs.loadingCover.hide();
					}
				})
				this.$http.sendrequest('/index/Cztitle', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.explain = res.data;
					}
				})
			},
			//返回页面
			gotos() {
				this.$util.redirectTo('/pages/tabulation/tabulation', {
					type: 'topping'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refreshpurchase {
		min-height: 100vh;
		background: $uni-content-background-color;
		font-family: Arial;

		.topbox {
			margin: 30rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 45rpx 50rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;

			.time {
				color: #FF6F30;
				font-weight: 500;
			}
		}

		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #FF6F30;
			margin: 0 30rpx 35rpx;
		}

		.txt {
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			margin: 0 30rpx 18rpx;
		}

		.itembox {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 48rpx 30rpx 0;

			.item {
				width: 210rpx;
				height: 150rpx;
				background: rgba(0, 0, 0, .02);
				border-radius: 10rpx;
				margin: 0 30rpx 30rpx 0;
				padding: 30rpx 0;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				color: #666666;
				box-sizing: border-box;

				.tim {
					font-size: 24rpx;
					margin-left: 6rpx;
					color: #333333;
				}

				.text {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}

				.title {
					margin-top: 4rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF6F30;
				}
			}

			.item:nth-child(2n) {
				margin-right: 0;
			}

			.hoveritem {
				color: #FF6F30;
				background: rgba(255, 111, 48, .1);
				border: 2rpx solid #FF6F30;
			}
		}

		.btn {
			margin: 86rpx 60rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			background: #FF6F30;
			border-radius: 90rpx;
		}

		.die {
			display: flex;
			flex-direction: column;
			margin-top: 66rpx;
			margin: 0 30rpx;
			line-height: 1.8;
			font-size: 24rpx;
			color: #333333;
		}

		.payment-box {
			width: 650rpx;
			min-height: 360rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx;
			box-sizing: border-box;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 2rpx solid rgba(0, 0, 0, .04);

				.right {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 2rpx solid $uni-tabbar-hovercolor;
					display: flex;
					align-items: center;
					justify-content: center;

					.center {
						background: $uni-tabbar-hovercolor;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
					}
				}

				.item-left {
					font-size: 28rpx;
					display: flex;
					align-items: center;

					.iconfont {
						font-size: 60rpx;
						margin-right: 30rpx;
					}
				}
			}

			.close {
				text-align: center;
				margin-top: 50rpx;
				font-size: 34rpx;
				background: $uni-tabbar-hovercolor;
				color: #FFFFFF;
				border-radius: 90rpx;
				height: 90rpx;
			}
		}

		.icon-zhifubao {
			color: #22ABFF !important;
		}

		.icon-weixin {
			color: #34C758 !important;
		}
	}
</style>